<template>
	<view class="page">
		<view class="head">
			<view class="head-img">
				<image src="../../static/dafaulthead2.png" v-if="detail.avatarUrl == ''"></image>
				<image :src="detail.avatarUrl" mode="aspectFill" title="头像" v-else></image>
			</view>
			<view class="head-input" @click="showMulLinkageThreePicker">
				<text class="head-Select">{{location}}</text>
				<!-- <input class="head-Select" type="text" :value="location" disabled="" /> -->
				<image class="select-img"  src="../../static/app/jiaotou2.png">
				</image>
				<!-- 				<input class="head-Select" type="type" value="桂林" />
						<image class="select-img" src="../../static/jiaotou2.png"></image> -->
			</view>
		</view>
		<view v-for="(item,index) of welfareData" :key="index">
			<view class="list-wrapA" @click="showDialog(index,item.id)"
				:style="{background:'url('+item.image.file_path+') 0 0/100% 100%'}">
				<view class="list-itemA">
					<view class="title-box">
						<view class="item-title">{{item.welfare_name}}</view>
						<view class="item-sub-title">{{item.description}}</view>
					</view>
					<view class="item-num">
						<view class="item-titleA" v-if="item.welfare_count!= 0">总交易达 <text
								class="item-title-numA">{{item.welfare_count}}</text> 次</view>
						<!-- <view class="item-title2A" v-if="item.welfare_count == 0">暂无交易</view> -->
					</view>

				</view>
			</view>
		</view>

		<!-- 	<view class="list-wrap" @click="showDialog(shopData.list[1])">
			<view class="list-item">
				<view class="item-title" v-if="welfare.stateNum != 0">总交易达 <text
						class="item-title-num">{{welfare.stateNum}}</text> 次</view>
				<view class="item-title2" v-if="welfare.stateNum == 0">暂无交易</view>
				<view class="item-sub-title">首次交易，三折起</view>
			</view>
		</view> -->
		<!-- 	<view class="list-wrap" @click="showDialog(shopData.list[2])">
			<view class="list-item item2">
				<view class="item-title" v-if="welfare.mainteinNum != 0">总交易达 <text
						class="item-title-num">{{welfare.mainteinNum}}</text> 次</view>
				<view class="item-title2" v-if="welfare.mainteinNum == 0">暂无交易</view>
				<view class="item-title">保养福利</view>
				<view class="item-sub-title">用车无忧</view>
			</view>
		</view> -->
		<!-- <view class="list-wrap" @click="showDialog(shopData.list[3])">
			<view class="list-item item5">
				<view class="item-title" v-if="welfare.tyreNum != 0">总交易达 <text
						class="item-title-num">{{welfare.tyreNum}}</text> 次</view>
				<view class="item-title2" v-if="welfare.tyreNum == 0">暂无交易</view>
				<view class="item-title">轮胎保养</view>
				<view class="item-sub-title">首次交易，三折起</view>
			</view>
		</view> -->
		<!-- <view class="list-wrap" @click="showDialog(shopData.list[4])">
			<view class="list-item item6">
				<view class="item-title" v-if="welfare.errandNum != 0">总交易达 <text
						class="item-title-num">{{welfare.errandNum}}</text> 次</view>
				<view class="item-title2" v-if="welfare.errandNum == 0">暂无交易</view>
				<view class="item-title">跑腿</view>
				<view class="item-sub-title">用车无烦恼</view>
			</view>
		</view> -->
		<!-- <view class="list-wrap" @click="showDialog(3)"> -->
		<view class="list-wrap" @click="gotoPage('/pages/user/shoppingmall/shoppingmall')">
			<view class="list-item item3">
				<view class="item-title">积分福利</view>
				<!-- <view class="item-title-con">暂无交易</view> -->
				<!-- <view class="item-sub-title">您已有 999 积分，点击查看</view> -->
			</view>
		</view>
		<!-- <view class="developing" v-if="developing">
			正在开发当中，请尽情期待... ...
		</view> -->
		<view class="closeIntegral" @click="closeIntegral()" v-if="developing">确定</view>
		<view class="list-wrap" @click="gotoPage('/pages/user/dealingSlip/dealingSlip')">
			<view class="list-item item4">
				<view class="item-title">交易记录</view>
				<!-- <view class="item-title-con">暂无交易</view> -->
				<!-- <view class="item-sub-title">帮您记录每一单的交易情况</view> -->
			</view>

		</view>
		<view class="mask" v-show="isShow"></view>
		<view class="dialog-wrap" v-show="isShow">
			<view class="logo">
				<image src="../../static/app/logo.png"></image>
			</view>
			<!-- <form @submit="formSubmit" @reset="formReset"> -->
			<view class="input-wrap">
				<view class="input-item">
					<view class="input-label">
						姓名:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入公司名称及检车师傅姓名" type="text"
							v-model="form.realname">
					</view>
				</view>

				<view class="input-item">
					<view class="input-label">
						手机号:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入手机号" type="number"
							v-model="form.phone">
					</view>
				</view>


				<view class="address-item input-item">
					<view class="address input-label">
						地址:
					</view>
					<view class="add-select input-box">
						<input class="input" v-model="form.address" disabled="" placeholder-class="placeholder-class"
							type="text">
						<image class="addimage" src="../../static/jiantou3.png"></image>
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						车牌号:
					</view>
					<view class="input-box">
						<input class="input" placeholder-class="placeholder-class" placeholder="请输入车牌号" type="text"
							v-model="form.car_number">
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">
						备注:
					</view>
					<view class="input-box">
						<input class="input" :placeholder="tick"  placeholder-class="placeholder-class" type="text" v-model="form.remark">
					</view>
				</view>
				<!-- <view class="input-tick">
					<view class="input-label">
						提示:
					</view>
					<view class="tick">
						<text>姓名:真实姓名或公司名称;<br />车检福利:预约检车时间及其他;<br />轮胎保养:更换的轮胎数量;<br />保养福利:机油品牌及型号</text>						
					</view>
				</view> -->
				<!-- <view class="input-item">
						<view class="input-label">
						
						</view>
						<view class="input-box">
							<input class="input" placeholder-class="placeholder-class" placeholder="请输入车牌号" type="text" v-model="form.realname">
						</view>
					</view> -->
			</view>
			<!-- </form> -->

			<view class="dialog-btn">
				<button type="primary" form-type="submit" class="submit-btn" @click="$noMultipleClicks(formSubmit)">提交</button>
			</view>

			<view class="dialog-close" @click="closeDialog">
				<image src="../../static/app/close.png" mode=""></image>
			</view>

		</view>

		<view class="bottom-dialog-wrap" v-show="isShow">
			<view class="info-wrap" @click="phoneCall">
				<view class="info-item">
					<image src="../../static/app/phone.png" mode=""></image>
					<text>
						呼叫 {{phone}}
					</text>
				</view>
			</view>
			<view class="dialog-btn" @click="closeDialog">
				取消
			</view>
		</view>
		<view class="mask" v-show="isTick"></view>
		<view class="form-tick" v-show="isTick">
			<view class="form-tick-title">温馨提示</view>
			<view class="form-tick-con">您的信息已经提交成功，我们会在2个工作日和您联系！</view>
			<view @click="tickSure" class="form-tick-sure">确定</view>
		</view>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm">
		</mpvue-city-picker>
		<footTabber></footTabber>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				tick:'',
				form: {
					realname: '', //姓名
					phone: '', //手机号
					car_number: '', //车牌号
					//type: '',
					remark: '', //备注
					address: '广西 桂林', //地址
					type: '', //所选择的福利id
					//city: '广西 桂林',//地址
				},
				phone: '191 6774 4084',
				isShow: false,
				isTick:false,
				detail: {
					avatarUrl: '',
				},
				location: '',
				cityPickerValueDefault: [0, 0, 0],
				developing: false,
				timer: null,
				welfare: {
					stateNum: 0, //车检福利的总交易次数
					mainteinNum: '60', //保养福利的总交易次数
					tyreNum: '60', //轮胎保养的总交易次数
					errandNum: 0, //跑腿的总交易次数
				},
				shopData: [], //供应商列表
				welfareData: [], //福利列表
				noClick:true,
			};
		},
		mounted() {

		},
		onLoad() {
			//let commonConfig = uni.getStorageSync('commonConfig');
			//this.phone = '' + commonConfig['service_phone'];
			this.getData();
			this.getLocation();
			//this.getAddressData();
			this.getShop();
			this.getDataNum();
		},
		onPullDownRefresh() {
			this.getData();
			this.getLocation();
			//this.getAddressData();
			this.getShop();
			this.getDataNum();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onUnload() {
			if(this.timer) {  
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		},
		methods: {
			/* 关闭积分福利内容 */
			closeIntegral() {
				this.developing = false
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
			/* 积分福利内容 */
			showIntegral() {
				this.developing = true;
				this.timer = setTimeout(() => {
					this.developing = false
				}, 3000);
			},
			showDialog(e, id) {
				let self = this;
				self.isShow = true;
				self.phone = self.shopData.list[e + 1];
				self.form.welfare_id = id;
				if(id == 1){
					self.tick = '预约检车时间及其他'
				}else if(id ==2){
					self.tick = '机油品牌及型号'
				}else if(id == 3){
					self.tick = '更换的轮胎数量'
				}else{
					self.tick = ''
				}
				//console.log(id);
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				this.selectCity = e.label;
				var str = this.selectCity.replace(/,/, "1");
				var str1 = str.indexOf("1");
				var str2 = str.indexOf(",");
				var str3 = str.substring(str1 + 1, str2);
				this.location = str3;

			},
			/* 获取当前位置 */
			getLocation() {
				let self = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						self.location = res.address.city;
					},
					fail: function(res) {

					}
				});
			},
			/* 获取福利列表 */
			getDataNum() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('welfare.welfare/get_list', {}, function(res) {

					self.welfareData = res.data.list;

					//self.detail = res.data.userInfo;
					uni.hideLoading();
				});
			},
			/* 获取头像 */
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/detail', {}, function(res) {
					self.detail = res.data.userInfo;
					uni.hideLoading();
				});
			},
			/* 获取地址 */
			getAddressData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('home/get_address', {}, function(res) {

					//self.detail = res.data.userInfo;
					uni.hideLoading();
				});
			},
			/* 获取供应商 */
			getShop() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('supplier.index/list', {
						//sortType:1
					},
					function(res) {

						self.shopData = res.data;
						//console.log(self.shopData.list[3]);
						// self.shopData.forEach(item =>{
						// 	item.t = item.welfare_id
						// 	console.log(item.t)
						// });
						//console.log()
						//self.detail = res.data.userInfo;
						uni.hideLoading();
					});
			},
			formSubmit() {
				let self = this;
				var formdata = self.form;
				//console.log(formdata);
				let bb = /^[\u4e00-\u9fa5]{0,}$/;
				// if (!bb.test(self.form.realname)) {
				// 	uni.showToast({
				// 		title: '请填写正确的姓名',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				if (self.form.realname == '') {
					uni.showToast({
						title: '请输入公司名称及检车师傅姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (self.form.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}


				let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
				if (!reg.test(self.form.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				let regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Za-z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/
				if (!regExp.test(self.form.car_number)) {
					uni.showToast({
						title: '车牌号有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (self.form.car_znumber == '') {
					uni.showToast({
						title: '请输入车牌号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._post(
					'user.welfare/add',
					formdata,
					result => {
						if (result.code == 1) {
							self.isTick = true;
							self.getDataNum();
							self.isShow = false;
							// uni.showToast({
							// 	title: '提交成功！',
							// 	duration: 2000,
							// 	icon: 'none'
							// });
							// self.timer = setTimeout( () => {
							//   self.getDataNum();
							// }, 1000);
							// if (self.timer) {
							// 	clearTimeout(self.timer);
							// 	self.timer = null;
							// }					
							// self.isShow = false;
							// self.closeDialog();
							//self.getDataNum();
							//self.gotoPage('/pages/welfare/welfare');
							//self.isShow = false;
							//self.codeSbm = 2;
							//self.gotoPage('/pages/user/index/index');
						}
					},
					false,
					() => {
						uni.hideLoading();
					}
				);
				// self._post('user.welfare/add', formdata, function(res) {
				// 	console.log("成功")
				// 	self.isShow = false;
				// 	// self.showSuccess(res.msg, function() {

				// 	// 	// // #ifndef H5
				// 	// 	// uni.navigateBack({
				// 	// 	// 	delta: parseInt(self.delta)
				// 	// 	// });
				// 	// 	// // #endif
				// 	// 	// // #ifdef H5
				// 	// 	// history.go(-self.delta);
				// 	// 	// // #endif
				// 	// });
				// });
			},
			tickSure(){
				let self = this;
				
				self.isTick = false;
				self.closeDialog();
			},
			phoneCall() {
				let self = this;
				console.log(self.phone);
				uni.makePhoneCall({
					phoneNumber: self.phone
				});
			},

			closeDialog() {
				let self = this;
				self.isShow = false;
				self.form.realname = '';
				self.form.phone = '';
				self.form.car_number = '';
				self.form.type = '';
				self.form.remark = '';
				self.form.address = '广西 桂林';
				self.form.welfare_id = '';
				// self.form: {
				// 	realname: '',//姓名
				// 	phone: '',//手机号
				// 	car_number: '',//车牌号
				// 	type: '',
				// 	identify: '',//备注
				// 	address: '广西 桂林',//地址
				// 	welfare_id: '',//所选择的福利id
				// },
			},
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
		}
	}
</script>

<style lang="scss">
	@import 'welfare.scss';
</style>
